<template>
	<view class="index">
		<view class="cf bs6 p-15-10 mb10" :style="{background:subColor}">
			<view class="mb10" :style="{height:(more_height+'rpx'),overflow:'hidden'}">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in valueList" :key="listIndex">
						<view class="p-10-0 tac grid c0">
							<view class="grid-text f12 mb5">{{listItem.title}}</view>
							<view v-if="(listIndex+1)%3!==0" class="br"></view>
							<text class="f14 wei">{{listItem.num}}</text>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="f-c-b c0 f12 p5" @click="more">
				<text class="mr5">{{text}}</text>
				<u-icon size="14" color="#000" :name="more_name" style="line-height: 56rpx;"></u-icon>
			</view>
		</view>
		<!-- <view class="p10 f16 wei6">储值对账明细</view> -->
		<!-- <view>
			<view class="uni-container">
				<uni-table ref="table" border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center">ID</uni-th>
						<uni-th align="center">统计日期</uni-th>
						<uni-th align="center">期初余额</uni-th>
						<uni-th align="center">储值本金</uni-th>
						<uni-th align="center">储值赠送</uni-th>
						<uni-th align="center">收入合计</uni-th>
						<uni-th align="center">支出合计</uni-th>
						<uni-th align="center">期末余额</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in valuedata" :key="index">
						<uni-td>{{ item.id }}</uni-td>
						<uni-td>
							<view class="name">{{ item.day }}</view>
						</uni-td>
						<uni-td align="center">{{ item.startBalance }}</uni-td>
						<uni-td align="center">{{ item.storedValueCapital }}</uni-td>
						<uni-td align="center">{{ item.storedValueGive }}</uni-td>
						<uni-td align="center">{{ item.storedValue }}</uni-td>
						<uni-td align="center">{{ item.balanceMoney }}</uni-td>
						<uni-td align="center">{{ item.balance }}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</view> -->
		<!-- <view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view> -->
	</view>
</template>

<script>
	export default {
		// props: ["valueList", "valuedata"],
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				tableData: [],
				time: '',
				text: '展开全部',
				more_name: 'arrow-down',
				more_height: 140,
				chartData: {},
				valueList: [{
					title: '余额支付订单数',
					num: 0,
				}, {
					title: '余额支付金额',
					num: 0,
				}, {
					title: '余额退款订单数',
					num: 5,
				}, {
					title: '余额退款金额',
					num: 0,
				}],
				valuedata: [],
				queryForm: {
					timeType: 2,
					pageNo: 1,
					pageSize: 10,
				},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						rotateLabel: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						}
					},
				}
			}
		},
		methods: {
			async fetchValue(q) {
				if (q.startTime && q.endTime) {
					this.queryForm.startTime = q.startTime
					this.queryForm.endTime = q.endTime
					this.queryForm.timeType = 1
				} else {
					this.queryForm.timeType = q.timeType
				}
				const {
					data
				} = await this.beg.request({
					url: this.api.valueScs,
					data: this.queryForm,
				})
				this.valueList[0].num = data.balanceOrder
				this.valueList[1].num = data.balanceMoney
				this.valueList[2].num = data.balanceRefundOrder
				this.valueList[3].num = data.balanceRefundMoney.toFixed(2)
				this.valuedata = data.data.list
			},
			more() {
				if (this.more_height === 140) {
					this.more_height = 280
					this.text = '收起'
					this.more_name = 'arrow-up'
				} else {
					this.more_height = 140
					this.text = '展开全部'
					this.more_name = 'arrow-down'
				}
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2023-05-05", "2023-05-06", "2023-05-07", "2023-05-08", "2023-05-09",
							"2023-05-10"
						],
						series: [{
								name: "储值明细",
								data: [35, 8, 25, 37, 4, 20]
							},

						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style scoped>
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>